<template>
  <div class="shuttle-table-warp">
    <el-row>
      <el-col :span="11">
        <div class="shuttle-left">
          <div class="header-wrap">
            <div>待选列表</div>
            <div>
              {{ leftAutoStatistical }}
            </div>
          </div>
          <table border="0" cellspacing="0">
            <thead>
              <th>
                <label class="checkbox_wrap">
                  <input type="checkbox" v-model="leftAllcheck" @change="leftAllChoose(leftAllcheck)" />
                  <span class="span_checkbox"> </span>
                </label>
              </th>

              <th v-for="(item) in leftTableConfig.thHead" :key="item.id">
                {{ item.name }}
              </th>
            </thead>
            <tbody>
              <tr v-for="(item) in leftTableConfig.tbData" :key="item.id" @dblclick.stop="leftDoubleClic(item)">
                <td>
                  <label class="checkbox_wrap">
                    <input @click.stop="" @dbclick.stop="" type="checkbox" v-model="item.check" />
                    <span class="span_checkbox"> </span>
                  </label>
                </td>
                <td>{{ item.name }}</td>
                <td>{{ item.havemoney }}</td>
                <td>{{ item.waitmoney }}</td>
              </tr>
            </tbody>
          </table>
          <div class="footer-wrap"></div>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="shuttle-center">
          <div class="shuttle-center-container">
            <div @click="leftToRight" :style="leftChoose">
              <img src="~@/low-code/assets/shuttle-right.png" alt="" />
            </div>
            <div @click="rightToLeft" :style="rightChoose">
              <img src="~@/low-code/assets/shuttle-left.png" alt="" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="11">
        <div class="shuttle-right">
          <div class="header-wrap">
            <div>已选列表</div>
            <div>
              {{ rightAutoStatistical }}
            </div>
          </div>
          <table border="0" cellspacing="0">
            <thead>
              <th>
                <label class="checkbox_wrap">
                  <input type="checkbox" v-model="rightAllcheck" @change="rightAllChoose(rightAllcheck)" />
                  <span class="span_checkbox"> </span>
                </label>
              </th>

              <th v-for="(item) in rightTableConfig.thHead" :key="item.id">
                {{ item.name }}
              </th>
            </thead>
            <tbody>
              <tr v-for="(item) in rightTableConfig.tbData" :key="item.id" @dblclick.stop="rightDoubleClic(item)">
                <td>
                  <label class="checkbox_wrap">
                    <input @click.stop="" @dbclick.stop="" type="checkbox" v-model="item.check" />
                    <span class="span_checkbox"> </span>
                  </label>
                </td>
                <td>{{ item.name }}</td>
                <td>{{ item.havemoney }}</td>
                <td>{{ item.waitmoney }}</td>
              </tr>
            </tbody>
          </table>
          <div class="footer-wrap"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import clone from "clone"

  export default {
    props: {
      leftTableConfig: {
        type: Object,
        default () {
          return {
            thHead: [{ name: "xxx" }],
            tbData: [],
          };
        },
      },
      rightTableConfig: {
        type: Object,
        default () {
          return {
            thHead: [{ name: "xxx" }],
            tbData: [],
          };
        },
      },
    },
    data () {
      return {
        leftAllcheck: false,
        rightAllcheck: false,
      };
    },
    computed: {
      leftChoose () {
        let flag = this.leftTableConfig.tbData.some((item) => {
          return item.check;
        });
        return {
          opacity: flag > 0 ? 1 : 0.4,
        };
      },
      rightChoose () {
        let flag = this.rightTableConfig.tbData.some((item) => {
          return item.check;
        });
        return {
          opacity: flag > 0 ? 1 : 0.4,
        };
      },
      leftAutoStatistical () {
        let nowSelect =
          this.leftTableConfig.tbData.filter((item) => item.check).length || 0;
        let allNumber = this.leftTableConfig.tbData.length || 0;
        return `${nowSelect}/${allNumber}`;
      },
      rightAutoStatistical () {
        let nowSelect =
          this.rightTableConfig.tbData.filter((item) => item.check).length || 0;
        let allNumber = this.rightTableConfig.tbData.length || 0;
        return `${nowSelect}/${allNumber}`;
      },
    },
    methods: {
      isRightHas (unit) {
        return this.rightTableConfig.tbData.some(item => item.id == unit.id) || false
      },
      leftToRight () {
        let awaitPush = [];
        let ids = [];
        // eslint-disable-next-line no-unused-vars
        for (const [index, item] of this.leftTableConfig.tbData.entries()) {
          if (item.check) {
            if (this.isRightHas(item)) {
              item.check = false;
              continue;
            }
            ids.push(item.id);
            item.check = false;
            let deepItem = clone(item)
            awaitPush.push(deepItem);
          }
        }

        this.rightTableConfig.tbData = [
          ...this.rightTableConfig.tbData,
          ...awaitPush,
        ];
      },
      rightToLeft () {
        let awaitPush = [];
        let ids = [];
        // eslint-disable-next-line no-unused-vars
        for (const [index,item] of this.rightTableConfig.tbData.entries()) {
          if (!item.check) {
            ids.push(item.id);
            awaitPush.push(clone(item));
          }
        }

        this.rightTableConfig.tbData = awaitPush
      },
      leftDoubleClic (unit) {
        unit.check = false;
        if (this.isRightHas(unit)) {
          return;
        }
        this.rightTableConfig.tbData = [
          ...this.rightTableConfig.tbData,
          clone(unit),
        ];
      },
      rightDoubleClic (unit) {
        unit.check = false;
        let index = this.rightTableConfig.tbData.findIndex(item => item.id == unit.id)
        this.rightTableConfig.tbData.splice(index, 1)
      },
      leftAllChoose (check) {
        this.leftTableConfig.tbData.map((item) => {
          this.$set(item, "check", check);
        });
      },
      rightAllChoose (check) {
        this.rightTableConfig.tbData.map((item) => {
          this.$set(item, "check", check);
        });
      },
    },
  };
</script>

<style scoped lang="scss">
/* table */
/* 全屏按钮-背景-颜色 */
$table-screenfullicon-backgroundColor:rgba(75, 95, 121, 1);
/* 边框-颜色 */
$table-borderColor:#e6e6e6;
/* 文字-th-颜色 */
$table-th-fontColor:#999;
/* 背景-th-颜色 */
$table-th-backgroundColor:#f6f6f6;
/* 文字-td-颜色 */
$table-td-fontColor:#323232;
/* 背景-th-颜色 */
$table-td-backgroundColor:#fff;
/* 边框-固定行列-颜色 */
$table-fixed-borderColor:#e6e6e6;

/* 选中-tr-背景-颜色 */
$table-tr-selected-backgroundColor:#F7F9FF;

/* 链接-颜色 */
$table-a-fontColor:#1890ff;
/* 多选框-边框-圆角弧度 */
$table-checkbox-borderRadius:3px;
/* 多选框-边框-颜色 */
$table-checkbox-borderColor:#dcdcdc;
/* 多选框-背景-颜色 */
$table-checkbox-backgroundColor:#fff;
/* 多选框-选中-边框-颜色 */
$table-checkbox-checked-borderColor:#1890ff;
/* 多选框-选中-背景-颜色 */
$table-checkbox-checked-backgroundColor:#1890ff;
/* 多选框-选中-item-边框-颜色 */
$table-checkbox-item-checked-borderColor:#ffffff;
/* 多选框-禁止-边框-颜色 */
$table-checkbox-disabled-borderColor:#dcdcdc;
/* 多选框-禁止-背景-颜色 */
$table-checkbox-disabled-backgroundColor:#f5f5f5;

/* 全屏-背景-颜色 */
$table-isFullscreen-backgroundColor:rgba(0, 0, 0, 0.9);
/* 全屏-按钮-背景-颜色 */
$table-isFullscreen-button-backgroundColor:#4b5f79;

/* 穿梭框-按钮--颜色 */
$table-shuttle-button-backgroundColor:#1890ff;
/* 穿梭框-按钮-圆角 */
$table-shuttle-button-borderRadius:3px;

.shuttle-table-warp {
  & ::v-deep .table-containter {
    height: 220px !important;
  }
  table {
    width: 100%;
    border-top: 1px solid $table-borderColor;
    border-left: 1px solid $table-borderColor;
    th {
      // box-shadow: 1px 1px 1px $table-borderColor;
      padding: 5px 6px;
      line-height: 20px;
      background: #f6f6f6;
      color: $table-th-fontColor;
      font-weight: normal;
      border-bottom: 1px solid $table-borderColor;
      border-right: 1px solid $table-borderColor;
    }
    tr {
      cursor: pointer;
      td {
        // box-shadow: 1px 1px 1px $table-borderColor;
        border-bottom: 1px solid $table-borderColor;
        border-right: 1px solid $table-borderColor;
        box-sizing: border-box;
        padding: 5px 6px;
        font-weight: normal;
        height: 34px;
        text-align: center;
      }
    }
    .checkbox_wrap {
      font-size: 0px;
      position: relative;
      width: 16px;
      height: 16px;
      margin: 0 auto;
      display: block;
      input[type="checkbox"] {
        position: absolute;
        left: 0px;
        width: 100%;
        top: 0px;
        height: 100%;
        opacity: 0;
        visibility: hidden;
        z-index: 9;
      }
      input[type="checkbox"] + span {
        height: 16px;
        width: 16px;
        display: block;
        cursor: pointer;
      }
      input[type="checkbox"]:disabled + span {
        cursor: not-allowed;
      }
      input[type="checkbox"] + span::before {
        position: absolute;
        left: 0px;
        top: 0%;
        width: 16px;
        height: 16px;
        border: 1px solid $table-checkbox-borderColor;
        border-radius: $table-checkbox-borderRadius;
        box-sizing: border-box;
        content: "";
      }
      input[type="checkbox"]:checked + span::before {
        border: 1px solid $table-checkbox-checked-borderColor;
        background: $table-checkbox-checked-backgroundColor;
      }
      input[type="checkbox"]:checked + span::after {
        position: absolute;
        top: 7px;
        left: 4px;
        display: block;
        width: 3px;
        height: 7px;
        border: 2px solid $table-checkbox-item-checked-borderColor;
        border-top: 0;
        border-left: 0;
        transform: rotate(45deg) scale(1) translate(-50%, -50%);
        opacity: 1;
        transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
        display: block;
        content: " ";
        -webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%);
        -moz-transform: rotate(45deg) scale(1) translate(-50%, -50%);
        -ms-transform: rotate(45deg) scale(1) translate(-50%, -50%);
        -o-transform: rotate(45deg) scale(1) translate(-50%, -50%);
      }
      input[type="checkbox"]:disabled + span:before {
        border: 1px solid $table-checkbox-disabled-borderColor;
        background: $table-checkbox-disabled-backgroundColor;
      }
      input[type="checkbox"]:disabled:checked + span::after {
        border: 2px solid $table-checkbox-disabled-borderColor;
        border-top: 0;
        border-left: 0;
      }
    }
  }
  .shuttle-center-container {
    padding-top: 50px;
    & > div {
      width: 24px;
      height: 24px;
      background: $table-shuttle-button-backgroundColor;
      margin: 10px auto;
      text-align: center;
      opacity: 1;
      border-radius: $table-shuttle-button-borderRadius;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    & > div img {
      height: 12px;
      align-items: center;
    }
  }
  .header-wrap {
    display: flex;
    line-height: 35px;
    padding: 0 12px;
    justify-content: space-between;
    border-top: 1px solid $table-borderColor;
    border-left: 1px solid $table-borderColor;
    border-right: 1px solid $table-borderColor;
  }
  .footer-wrap {
    display: flex;
    min-height: 35px;
    line-height: 35px;
    padding: 0 12px;
    justify-content: space-between;
    border-bottom: 1px solid $table-borderColor;
    border-left: 1px solid $table-borderColor;
    border-right: 1px solid $table-borderColor;
  }
}

[class*="col-"] {
  background: none;
}
</style>